<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>下拉列表</title>
		<style type="text/css">
			@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
  background-color: #ea4848;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

.dropdown {
  width: 330px;
  height: 50px;
  margin: 40px auto;
  perspective: 1000px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.dropped {
  height: 200px;
}

.item {
  width: 300px;
  height: 50px;
  line-height: 50px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin: 0 0;
  padding: 0 20px;
  background-color: white;
  transition: transform .15s linear;
  cursor: pointer;
  user-select: none;
}
.item:last-child {
  transform: translate3d(0, -150px, 0);
}
.item:not(:last-child) {
  transform: translate3d(0, 50px, 0);
}
.item:hover:not(:last-child) {
  background-color: #fafafa;
}

.collapse:nth-of-type(1) {
  transform: translate3d(0, 0px, 0) scale(1.025);
}
.collapse:nth-of-type(1) {
  transform: translate3d(0, 0, 0);
}
.collapse:nth-of-type(2) {
  transform: translate3d(0, -56px, 0) scale(1.05);
}
.collapse:nth-of-type(1) {
  transform: translate3d(0, 0, 0);
}
.collapse:nth-of-type(3) {
  transform: translate3d(0, -112px, 0) scale(1.075);
}
.collapse:nth-of-type(1) {
  transform: translate3d(0, 0, 0);
}
.collapse:nth-of-type(4) {
  transform: translate3d(0, -168px, 0) scale(1.1);
}
.collapse:nth-of-type(1) {
  transform: translate3d(0, 0, 0);
}
.collapse:hover:last-child {
  transform-origin: 50% 100%;
  transform: translate3d(0, -174px, 0) rotateX(30deg) scale(1.1);
}

		</style>
	</head>
	<body>
		<!-- Index is messed up so put your top selection last-->
<!-- then use normal order-->
<div class="dropdown">
  <div class="item collapse">Item 2</div>
  <div class="item collapse">Item 3</div>
  <div class="item collapse">Item 4</div>
  <div class="item collapse">Select Item</div>
</div>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	
	var dropdown = $('.dropdown');
var item = $('.item');

item.on('click', function() {
  item.toggleClass('collapse');

  if (dropdown.hasClass('dropped')) {
    dropdown.toggleClass('dropped');
  } else {
    setTimeout(function() {
      dropdown.toggleClass('dropped');
    }, 150);
  }
})
</script>
	</body>
</html>
